<template>
  <view class="container">
    <view class="form">
      <input class="input" v-model="form.accountNumber" placeholder="账号由6-16位数字,字母以及_组成" />
      <input class="input" v-model="form.password" placeholder="密码由6-16位数字,字母组成" type="password" />
      <input class="input" v-model="form.confirmPassword" placeholder="请确认密码" type="password" />
      <button class="button" @click="handleRegister">注册</button>
      <view class="link" @click="goToLogin">已有账号？去登录</view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 定义响应式状态
const form = ref({
  accountNumber: '',
  password: '',
  confirmPassword: '',
  role: 0,
});

// 注册逻辑
const handleRegister = async () => {
  if (form.value.accountNumber && form.value.password && form.value.confirmPassword) {
	  //在此正则
	  // 验证账号
	  const usernameRegex = /^[a-zA-Z0-9_]{6,16}$/;
	  if(!usernameRegex.test(form.value.accountNumber)) {
		  uni.showToast({
		  	title: "账号格式错误",
			icon:'error'
		  })
		  return
	  }
	  
	  const passwordRegex = /^[a-zA-Z0-9]{6,16}$/;
	  if(!passwordRegex.test(form.value.password)){
		  uni.showToast({
		  	title: "密码格式错误",
		  	icon:'error'
		  })
		  return
	  }
	  // console.log(usernameRegex.test("user_123")); // true
	  // console.log(usernameRegex.test("short"));   // false
	  
	  // // 验证密码
	  // const passwordRegex = /^[a-zA-Z0-9]{6,16}$/;
	  // console.log(passwordRegex.test("pass123")); // true
	  // console.log(passwordRegex.test("p@ss"));    // false
    if (form.value.password === form.value.confirmPassword) {
	  uni.showLoading({
	  	title: "正在注册",
	  	mask: true
	  })
	  
	  // try {
		  const res = await uniCloud.callFunction({
		  	name: "register",
		  		data: form.value
		  })
	  // } catch(e) {
		 //  uni.showToast({
		 //  	title: e.message,
		 //  	icon: 'none'
		 //  })
		 //  return;
	  // }

	  if(res.result.code === 200){
		  uni.showToast({
		    title: '注册成功',
		    icon: 'success',
			mask: true
		  });
		  // 注册成功后跳转到登录页面
		  uni.navigateTo({
		    url: '/pages/login/login',
		  });
	  } else {
		  uni.showToast({
			title: res.result.message,
			icon: 'none',
			mask: true
		  })
		}
      uni.hideLoading()
    } else {
      uni.showToast({
        title: '两次输入的密码不一致',
        icon: 'none',
      });
    }
  } else {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    });
  }
};

// 跳转到登录页面
const goToLogin = () => {
  uni.navigateTo({
    url: '/pages/login/login',
  });
};

// 页面加载时执行
onLoad(() => {
  console.log('注册页面加载');
});
</script>

<style lang="scss" scoped>
	.container {
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding-top: 200rpx;
	  // height: 100vh;
	  .form {
		width: 80%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.input {
		  width: 100%;
		  height: 40px;
		  margin-bottom: 20px;
		  padding: 10px;
		  border: 1px solid #ccc;
		  border-radius: 5px;
		}
		.button {
		  width: 100%;
		  height: 40px;
		  background-color: #007aff;
		  color: #fff;
		  border-radius: 5px;
		  display: flex;
		  justify-content: center;
		  align-items: center;
		}
		
		.link {
		  margin-top: 10px;
		  color: #007aff;
		  text-align: center;
		  text-decoration: underline;
		}
	  }
	}
</style>